<template>
  <div class="">
    <!-- 性别选择器 -->
    <van-picker
      title="选择性别"
      show-toolbar
      :columns="columns"
      :default-index="localGender"
      @confirm="onConfirm"
      @change="onChange"
    />
    <!-- /性别选择器 -->
  </div>
</template>

<script>
// 导入 更新名字方法
import { updateUserGender } from '@/api/user.js'

export default {
  name: '',
  props: {
    // 性别数字代号(0男 1女)
    genderNum: {
      required: true
    }
  },
  data() {
    return {
      localGender: this.genderNum,
      columns: ['男', '女']
    }
  },
  created() {
    console.log(this.genderNum)
  },
  methods: {
    // 选择器改变选项事件-------------------
    onChange(a, b, index) {
      // 获取 选中的 性别下标
      this.localGender = index
    },
    // 执行修改 ----------------------------
    async onConfirm() {
      try {
        this.$toast.loading({
          message: '请稍后...', // 提示消息
          forbidClick: true, // 禁止点击关闭
          duration: 0 // 不关闭
        })
        await updateUserGender(this.localGender)
        this.$toast.success('更新成功~')
        this.$emit('onSuc', this.localGender)
      } catch (err) {
        this.$toast.fail('更新失败~')
      }
    }
  },
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #fff;
  /deep/ .van-nav-bar__title {
    color: #000 !important;
  }
}
</style>
